<template>
  <view @touchstart="handlestart" @touchend="handleend"><slot></slot></view>
</template>
<script>
/**
 * 手势逻辑
 * 1.给容器绑定两个触屏事件 handlestart handleend
 * 2.用户按下事件{
 * 1记录按下时间 Date.now()
 * 2记录x和y
 * }
 * 3.用户离开事件{
 * 1记录时间 Date.now()
 * 2记录x和y
 * 3根据两个时间判断用户按下屏幕时长是否合法
 * 4根据两对坐标 判断距离是否合法 判断 滑动的方向
 * }
 */
export default {
  data() {
    return {
      start_time: 0,
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    handlestart(event) {
      //   console.log("按下：" + event.changedTouches[0].clientX);
      //   console.log("按下：" + event.changedTouches[0].clientY);
      this.start_time = Date.now();
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    handleend(event) {
      //   console.log("离开：" + event.changedTouches[0].clientX);
      //   console.log("离开：" + event.changedTouches[0].clientY);
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;
      if (endTime - this.start_time > 3000) {
        return;
      }
      //滑动方向
      let direction = "";
      //先判断距离 是否合法 再判断滑动方向 注意距离加绝对值
      if (Math.abs(endX - this.startX) > 30 && Math.abs(endY - this.startY) < 30) {
        //滑动方向
        direction = endX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }
      //子组件传给父组件
      this.$emit("swiperAction", { direction });
    },
  },
};
</script>

<style></style>
